<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script type="text/javascript">
        function loadMyAct(){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("myContent").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","passage.html",true);
            xmlhttp.send();
        }
    </script>

    <title>个人主页</title>
    <style>
        /*页头部分 勿改*/
        /*设置div背景色为white*/
        /*以下部分和页脚部分统一*/
        body{margin: 0px;
        background-color: #f9f9f9;  }
        a{text-decoration:none}
        .banner {
            z-index:99999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            background-color: white;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: relative;
            top: -75px;
            left: 182px;
            height: 40px;
            width: 224px;
            border: 0px;
        }
        #search {
            position: relative;
            top: 30px;
            left: 0px;
            width: 224px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            font-size: 13px;
            background-color: transparent;
        }
        #btnLeft{
            margin-left: 30px;
            width: 235px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            position: relative;
            bottom: 0px;
            left: 195px;
            width: 28px;
            height: 28px;
        }
        #hpBtn{
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        /*页脚*/
        footer{
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }
        /*个人主页部分*/
        #headScul{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
            height: 140px;
            width: 140px;
            border-radius: 50%;
        }
        .personTab{
            background-color: white;
            margin: 100px auto;
            width: 1076px;
            height: 160px;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #userInfo{
            display: inline-block;
            height: 60px;
            float: left;
            margin-top: 80px;
            margin-left: 20px;

        }
        .setting{
            font: 15px 微软雅黑;
            float: right;
        }
        #settingDiv{
            height: 50px;
            width: 110px;
            float: right;
            margin-top: 80px;
            margin-right: 4%;
        }
        .centerDiv{
            width: 1076px;
            margin: -80px auto;
            height: auto;
        }
        .mainBlock{
            background-color: white;
            margin-left: 0;
            float: left;
            width: 718px;
            height: auto;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }

        #centerBtnDiv{
            margin-left: 30px;
            margin-top: 30px;
        }
        .centerBtn{
            margin-right: -5.5px;
            width: 100px;
            height: 40px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 18px 微软雅黑 ;
            color: #666666;
        }
        #myContent{
            width: 91.6%;
            margin-left: 30px;
            border: 0;
            background-color: white;
        }
        .follower{
            background-color: white;
            margin-right: 0;
            float: right;
            width: 338px;
            height: 470px;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #followBtn{
            width: 169px;
            height: 55px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: 18px 微软雅黑;
            color: #666666;
        }
        #fanBtn{
            float: right;
            width: 169px;
            height: 55px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: 18px 微软雅黑;
            color: #666666;
        }
        #headDiv{
            margin-top: 15px;
            height: auto;
            width: 338px;
        }
    </style>
</head>
<body>
<!--页头部分-->
<div class="banner">
    <img src="logologin.png" id="logo"/>
    <div class="searchDiv">
        <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
        <a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
    </div>
    <div id="btnLeft">
    <input type="button" name="homepage" id="hpBtn" value="个人中心">
    <input type="button" name="homepage" id="ppBtn" value="首页">
    </div>
</div>
<!--个人主页部分-->
<div class="personTab">
<img src="giggleIcon.png" id="headScul">
    <div id="userInfo"><t style="font: 18px 微软雅黑">用户名称</t><br><t style="font: 15px 微软雅黑;color: #666666 ">这是个性签名啊个性签名啊</t></div>
    <div id="settingDiv"><a href="" class="setting">编辑个人资料</a><br><a href="" class="setting">账户设置</a></div>
</div>
<div class="centerDiv">
    <div class="mainBlock">
        <div id="centerBtnDiv">
            <input type="button" name="homepage" id="actionBtn" value="我的动态" class="centerBtn" onclick="loadMyAct()" checked="checked">
            <input type="button" name="homepage" id="collectionBtn" value="我的收藏" class="centerBtn" onclick="loadMyCol()">
            <input type="button" name="homepage" id="postBtn" value="我的帖子" class="centerBtn" onclick="loadMyPos()">
        </div>

        <!--下面的Div来展示动态／收藏／帖子 内容，id为myContent-->
        <div id="myContent">
            <script>loadMyAct()</script>
        </div>
    </div>
    <div class="follower">
        <input type="button" name="homepage" id="followBtn" value="我关注的人" onclick="loadFollow()">
        <input type="button" name="homepage" id="fanBtn" value="关注我的人" onclick="loadFans()">
        <!--下面的div用于展示关注者头像-->
        <div id="headDiv">
            <!--每一个头像在这样一个div中 id="headImg"-->
            <!--style部分不变！-->

            <div style="text-align: center ;width: 112px;height: 112px; margin-top: 5px;float: left">
                <img src="头像/1.jpg" style="width: 80px;height: 80px;border-radius: 50%"><br>
                <div style="font: 15px 微软雅黑; margin: auto">用户名</div>
            </div>

        </div>
    </div>
</div>
<!--页脚部分-->
<!--页脚部分已预留上边缘，无需再留-->
<!--logo图片为文件夹中的giggleIcon.png-->
<footer>
    <div id="footer">
        <div id="footText">
            <img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
            <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
        <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
        <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
        </div>
    </div>
</footer>
<!--页脚部分结束-->
</body>
</html>